<template>
<div class="layout" >
    <Layout>
        <Sider hide-trigger style="background:#fff"><Tree :data="treeData"  @on-select-change="onSelctChange"></Tree></Sider>
        <Layout>
            <Header style="background:#fff"><Button @click="modal=true;type='create'" type="primary">添加</Button>
        <Button type="success" @click="confirm()">删除</Button><i-input icon="search" placeholder="请输入..." style="width: 350px" @on-click="search()" v-model="filter.title"></i-input>
         <Modal
        v-model="modal"
        title="商品添加"
        width=850
        @on-ok="ok"
        @on-cancel="cancel">
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                <FormItem label="title" prop="title">
                    <Input v-model="formValidate.title" placeholder="Enter your title"></Input>
                </FormItem>
                <FormItem label="分类ID" prop="cateId">
                    <Input v-model="formValidate.cateId" placeholder="Enter your cateId"></Input>
                </FormItem>
                <FormItem label="price" prop="price">
                    <Input v-model="formValidate.price" placeholder="Enter your e-mail"></Input>
                </FormItem>
                <FormItem label="Address" prop="address">
                    <Select v-model="formValidate.address" placeholder="Select your address">
                        <Option value="beijing">北京</Option>
                        <Option value="shanghai">上海</Option>
                        <Option value="shenzhen">深圳</Option>
                    </Select>
                </FormItem>
                <FormItem label="Desc" prop="desc">
                    <quill-editor v-model="formValidate.desc"
                      ref="myQuillEditor"
                      >
                    </quill-editor>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="handleSubmit('formValidate')">Submit</Button>
                    <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
                </FormItem>
            </Form>
        </Modal>

        </Header>
            <Content<Table border :columns="columns" :data="list"  @on-selection-change="addSelectData($event)"></Table>
        <Page :total="total" show-sizer show-elevator :page-size=5 :page-size-opts="arr"  @on-change="pageChange($event)" @on-page-size-change="pageSizeChange($event)"></Page></Content>
       </Layout>
    </Layout>
</div>
</template>
<script>
 // require styles
    import 'quill/dist/quill.core.css'
    import 'quill/dist/quill.snow.css'
    import 'quill/dist/quill.bubble.css'
    import { quillEditor } from 'vue-quill-editor'

    export default {
        data () {
            return {
               treeData: [] ,
                columns: [
                       { type: 'selection',
                        width: 60,
                        align: 'center'
                        },
                    {
                        title: '产品名',
                        key: 'title',
                        render: (h, params) => {
                            return h('div', [
                               h('strong', params.row.title)
                            ]);
                        }
                    },
                    
                    {
                        title: '价格',
                        key: 'price',
                        render: (h, params) => {
                            return h('div', [
                                h('Icon', {
                                    props: {
                                        type: 'social-usd'
                                    }
                                }),
                                h('normal', params.row.price)
                            ]);
                        }

                    },
                    {
                        title: '地址',
                        key: 'address'
                    },

                    {
                        title: '产品描述',
                        key: 'desc'
                    },
                    {
                        title: 'Action',
                        key: 'action',
                        width: 200,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.show(params.index)
                                        }
                                    }
                                }, '查看'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.index)
                                        }
                                    }
                                }, '删除'),
                                h('Button', {
                                    props: {
                                        type: 'warning',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.type="change";
                                            this.modal=true;
                                            this.formValidate={...(this.list[params.index])};
                                        }

                                    }
                                }, '修改')
                            ]);
                        }
                    }
                ],
                showCheckbox: true,
                list:[],
                arr:[5,10,15,20],
                total: 0,
                page: 1,
                limit:0,

                 filter:{
                    cateId:0,
                    page:1,
                    limit:0,
                    title: ""
                },
                 modal: false,
                  formValidate: {
                    title: '',
                    price: '',
                    cateId: 0,
                    address: '',
                    desc: ''
                },

                ruleValidate: {
                    title: [
                        { required: true, message: 'The title cannot be empty', trigger: 'blur' }
                    ],
                    cateId: [
                        { required: true, message: 'cateIdbox cannot be empty', trigger: 'blur' },

                    ],
                     price: [
                        { required: true, message: 'Please fill in the price.', trigger: 'blur' },
                    ],
                    address: [
                        { required: true, message: 'Please select theaddress', trigger: 'change' }
                    ],
                    desc: [

                        { required: true, message: 'Please enter a personal introduction', trigger: 'blur' },
                        { type: 'string', min: 8, message: 'Introduce no less than 20 words', trigger: 'blur' }
                    ]
                }
            }
        },
        components: {
          quillEditor
        },
        methods: {

            getData(){
                 this.filter.page=this.page;
                this.filter.limit=this.limit;
                this.filter.rows=this.filter.limit;
                this.$http.post("http://10.31.160.25:3000/product/list",this.filter).then((res)=>{
                     this.list=res.data.rows;
                      this.total=res.data.total;
                     this.page=res.data.page;
                 })
            },
            
             show (index) {
                this.$Modal.info({
                    title: 'Product Info',
                    content: `title：${this.list[index].title}<br>price：${this.list[index].price}<br>Address：${this.list[index].address}<br>Desc：${this.list[index].desc}`
                })
             },
             remove (index) {
                this.$http.delete(`http://10.31.160.25:3000/product/data/${this.list[index]._id}`).then(res=> {
                    this.list.splice(index, 1);
                    this.$Message.success('Success!');
                    this.getData();
                })
            },
            confirm () {
                this.$Modal.confirm({
                    title: '确认删除？',
                    content: '是否确认删除',
                    onOk: () => {
                        if(!this.selectData){
                            this.$Message.error('删除目标未选定');
                        }
                        this.manyDelete();
                    },
                    onCancel: () => {
                        this.$Message.info('取消删除');
                    }
                });
            },
            manyDelete(){
                var ids=[];
                for(var i=0;i<this.selectData.length;i++){
                    ids.push(this.selectData[i]._id);
                }

                if(this.list.length==ids.length&&this.page!=1){
                    this.page-=1
                }

                this.$http.post(`http://10.31.160.25:3000/product/data/removes`,{ids:ids.toString()}).then(res=>{
                    this.$Modal.success({
                        title: 'delete success',
                        content: '删除成功'

                    })
                this.getData();
                });

            },
            addSelectData(event){
            this.selectData=event;
            },
            search(){
                this.getData();
            },
            pageChange(event){
            this.page=event;
            this.getData();
            },
            pageSizeChange(event){
                this.limit=event;
                this.getData();
            },
             ok () {
                this.$Message.info('Clicked ok');
                this.getData();

            },
            cancel () {
                this.$Message.info('Clicked cancel');
            },
            update(index){
                this.$http.put(`http://10.31.160.25:3000/product/data/${this.list[index]._id}`).then(res=>{
                })
            },
            handleSubmit (name) {
                var that=this;
                this.$refs[name].validate((valid) => {
                    if (valid){
                       if(this.type=="create"){
                            this.formValidate._id=null;
                            this.$http.post(`http://10.31.160.25:3000/product/data`,this.formValidate).then(res=>{
                                this.$Message.success('添加成功!');
                                this.modal=false;
                                that.$refs[name].resetFields();
                                this.getData();
                            })
                        }
                        if(this.type=="change"){
                            this.$http.put(`http://10.31.160.25:3000/product/data/${this.formValidate._id}`,this.formValidate).then(res=>{
                                this.$Message.success("修改成功");
                                this.modal=false;
                                that.$refs[name].resetFields();
                                this.getData();
                            })
                        }
                    } else {
                        this.$Message.error('Fail!');
                    }
                })
            },
            handleReset (name) {
                this.$refs[name].resetFields();
            },
             getTree(){
                 this.$http.get("http://10.31.160.25:3000/cate/list/2").then((res)=>{
                     this.treeData=res.data;
                 })
             },
             onSelctChange(node){
                this.filter.cateId=node[0]._id;
                 this.formValidate.cateId=node[0]._id;
                this.getData();
             }
        },
        created(){
            this.getTree();
            this.getData();
        // },
        // components: {
        //   quillEditor
        }
    }
</script>
